<template>
	<!-- 引导页 -->
	<view class="temp" :style="{ height: screenHeight*0.9 + 'px' }">
		<swiper :current="currentIndex" @change="onSwiperChange" class="swiper" :indicator-dots="false"
			:autoplay="false">
			<swiper-item v-for="(item, index) in guideList" :key="index">
				<image class="swiperImage" :src="item.url" mode=""></image>
			</swiper-item>
		</swiper>
		<view class="dot-box" v-if="!end">
			<view :class="[currentIndex == index ? 'dot-selected' : 'dot']" v-for="(item, index) in guideList"
				:key="index"></view>
		</view>
		<view class="tiyan" v-else @tap="toRigest">
			<text>立即体验</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentIndex: 0,
				guideList: [{
						// url: require('@/pages/public/static/images/qidongye1.png')
					},
					{
						// url: require('@/pages/public/static/images/qidongye2.png')
					},
				],
				end: false
			};
		},
		methods: {
			onSwiperChange(event) {
				const current = event.detail.current;
				if (this.currentIndex == current) {
					return;
				}
				this.currentIndex = current;
				if (current == this.guideList.length - 1) {
					this.end = true
				} else {
					this.end = false
				}
			},
			toRigest() {
				uni.$u.route({
					url: 'pages/public/login'
				});
			}
		}
	};
</script>

<style lang="scss">
	.swiper {
		height: 100%;
	}

	.swiperImage {
		height: 100%;
		width: 100%;
	}

	.tiyan {
		position: fixed;
		bottom: 40rpx;
		@include flex;
		justify-content: center;
		align-items: center;
		width: 370rpx;
		height: 80rpx;
		background: #fff;
		border-radius: 40rpx;
		border: 2rpx solid $theme-color;
		color: $theme-color;
		font-weight: 400;
		left: 50%;
		transform: translate(-50%);
	}

	.dot-box {
		position: fixed;
		bottom: 40rpx;
		width: 100%;
		@include flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin-top: 18rpx;

		.dot {
			margin-left: 4rpx;
			margin-right: 4rpx;
			width: 12rpx;
			height: 12rpx;
			background: $theme-color;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
		}

		.dot-selected {
			margin-left: 4rpx;
			margin-right: 4rpx;
			width: 36rpx;
			height: 12rpx;
			background: $theme-color;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
		}
	}
</style>